<template>
	<div class="head-area">
		<div class="start-layout guohui-area">
			<img class="guohui-img" src="@/assets/image/guohui.png">
			<div>
				<div class="zh-name">河南省商丘市人民检察院</div>
				<div class="eng-name">Shangqiu people's Procuratorate of Henan Province</div>
			</div>
		</div>
		<div v-if="type!=9" class="search-area between-layout">
			<input class="search-input" v-model="keyword" placeholder="请输入关键词" />
			<router-link style="outline:none;" :to="{path:'/searchResult',query:{keyword:keyword}}">
				<div class="search-btn center-layout"><i class="el-icon-search" style="margin-right: 6px;"></i>搜索</div>
			</router-link>
		</div>
		<div class="tab-area center-layout">
			<div class="tabs">
				<img class="headNav" src="@/assets/image/headNav.png" />
				<div class="tabs-box center-layout">
					<router-link style="outline:none;" :to="{path:'/'}">
						<div @click="type=1" :class="type==1?'tabs-active':''" class="tabs-item">
							首&emsp;&emsp;页
							<img v-if="type==1" class="bottom-line" src="@/assets/image/navLi.png" />
						</div>
					</router-link>
					<router-link style="outline:none;" :to="{path:'/agencySet',query:{id:'1817830386937192448'}}">
						<div @click="type=2" :class="type==2?'tabs-active':''" class="tabs-item">
							机构设置
							<img v-if="type==2" class="bottom-line" src="@/assets/image/navLi.png" />
						</div>
					</router-link>
					<router-link style="outline:none;" :to="{path:'/affairsOpen',query:{id:'1817835226660691968'}}">
						<div @click="type=3" :class="type==3?'tabs-active':''" class="tabs-item">
							检务公开
							<img v-if="type==3" class="bottom-line" src="@/assets/image/navLi.png" />
						</div>
					</router-link>
					<router-link style="outline:none;" :to="{path:'/newsList',query:{id:'1817829252155662336'}}">
						<div @click="type=4" :class="type==4?'tabs-active':''" class="tabs-item">
							检察要闻
							<img v-if="type==4" class="bottom-line" src="@/assets/image/navLi.png" />
						</div>
					</router-link>
					<router-link style="outline:none;" :to="{path:'/lawMonitor',query:{id:'1817842098599981056'}}">
						<div @click="type=5" :class="type==5?'tabs-active':''" class="tabs-item">
							法律监督
							<img v-if="type==5" class="bottom-line" src="@/assets/image/navLi.png" />
						</div>
					</router-link>
					<router-link style="outline:none;" :to="{path:'/business',query:{id:'1817842224282300416'}}">
						<div @click="type=6" :class="type==6?'tabs-active':''" class="tabs-item">
							检察业务
							<img v-if="type==6" class="bottom-line" src="@/assets/image/navLi.png" />
						</div>
					</router-link>
					<router-link style="outline:none;" :to="{path:'/theoryResearch',query:{id:'1817842526263799808'}}">
						<div @click="type=7" :class="type==7?'tabs-active':''" class="tabs-item">
							理论研究
							<img v-if="type==7" class="bottom-line" src="@/assets/image/navLi.png" />
						</div>
					</router-link>
					<router-link style="outline:none;" :to="{path:'/baseBuilding',query:{id:'1817842684183539712'}}">
						<div @click="type=8" :class="type==8?'tabs-active':''" class="tabs-item">
							检察文化
							<img v-if="type==8" class="bottom-line" src="@/assets/image/navLi.png" />
						</div>
					</router-link>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				keyword: ""
			}
		},
		props: {
			typeRoute: {
				type: Number,
				default: 1,
			}
		},
		watch: {
			typeRoute: {
				handler(val, oldval) {
					this.type = val
					this.keyword=''
				},
				immediate: true,
				deep: true
			}
		},
	}
</script>

<style scoped lang="scss">
	.search-area {
		margin-top: 60px;
		margin-left: 120px;
		width: 538px;
		height: 48px;
		background: #fff;
		border-radius: 30px;
		-webkit-border-radius: 30px;
		-moz-border-radius: 30px;
		overflow: hidden;

		.search-input {
			width: 100%;
			margin-left: 30px;
			margin-right: 10px;
			border: none;
			outline: none;
		}

		.search-btn {
			width: 110px;
			height: 48px;
			background: #427ece;
			cursor: pointer;
			color: #ecf2fa;
			font-size: 18px;
		}
	}

	.head-area {
		width: 100%;
		height: 525px;
		background: url(~@/assets/image/222.png) no-repeat;
		background-size: 100% 100%;
		position: relative;

		.guohui-area {
			padding-top: 100px;
			margin-left: 100px;

			.guohui-img {
				display: block;
				width: 150px;
				height: 150px;
			}

			.zh-name {
				font-size: 56px;
				letter-spacing: 8px;
				color: #133678;
				font-weight: 700;
				font-family: "Microsoft YaHei";
			}

			.eng-name {
				font-size: 28px;
				color: #133678;
				font-weight: 400;
				font-family: "Microsoft YaHei";
			}
		}

		.tab-area {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;

			.tabs {
				position: relative;

				.headNav {
					width: 100%;
					height: 65px;
					display: block;
				}

				.tabs-box {
					position: absolute;
					top: 50%;
					left: 50%;
					width: 100%;
					transform: translate(-50%, -50%);

					.tabs-item {
						color: #BFD9F9;
						font-size: 24px;
						cursor: pointer;
						flex-shrink: 0;
						margin: 10px 32px;
						position: relative;
					}

					.tabs-item:hover {
						color: #ffffff;
						font-weight: 600;
					}

					.tabs-active {
						color: #ffffff;
						font-weight: 600;
					}

					.bottom-line {
						position: absolute;
						bottom: -15px;
						left: 0;
					}
				}
			}
		}
	}
</style>